<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-card>
          <div>
            <el-tree
              :data="settingOptions"
              :props="{ label: 'label', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="settingTreeRef"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="20" :xs="24">
        <div>
          <component :is="currentSetting"></component>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ProductInfo from "./components/ProductInfo";

export default {
  name: "Setting",
  components: {
    ProductInfo,
  },
  props: {},
  data() {
    return {
      currentSetting: "ProductInfo",
      checkDefault: [1],
      settingOptions: [
        { label: "基础信息" },
        { label: "功能设置" },
        { label: "成员管理" },
        { label: "权限管理" },
        { label: "产品状态" },
        { label: "产品工作流" },
      ],
    };
  },
  methods: {
    /** 通过条件过滤节点  */
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      switch (data.label) {
        case "基础信息":
          this.currentSetting = ProductInfo;
          break;
      }
    },
  },
};
</script>
